const data: any = {
  codes: [],
  ctx: '',
  colors: ['red', 'yellow', 'blue', 'green', 'pink', 'black'],
  code_Len: 4
};
const generateRandom = () => {
  data.codes = [];
  const chars = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  const charsArr = chars.split('');

  for (let i = 0; i < data.code_Len; i++) {
    const num = Math.floor(Math.random() * charsArr.length);
    data.codes.push(charsArr[num]);
  }
};
const draw = (canvas: any) => {
  generateRandom();
  drawText(canvas);
};
const drawLine = () => {
  const lineNumber = 3; // 线条条数
  const lineX = 100;
  const lineY = 30; // 最大线条坐标
  for (let i = 0; i < lineNumber; i++) {
    data.ctx.strokeStyle = data.colors[Math.floor(Math.random() * 5)];
    data.ctx.beginPath();
    data.ctx.moveTo(Math.floor(Math.random() * lineX), Math.floor(Math.random() * lineY));
    data.ctx.lineTo(Math.floor(Math.random() * lineX), Math.floor(Math.random() * lineY));
    data.ctx.stroke();
  }
};
const drawText = (canvas: any) => {
  data.ctx = canvas.getContext('2d');

  data.ctx.fillStyle = '#BFEFFF';
  data.ctx.fillRect(0, 0, 100, 40);
  data.ctx.font = '20px Verdana';

  let x = 15;

  for (let i = 0; i < data.code_Len; i++) {
    data.ctx.fillStyle = data.colors[Math.floor(Math.random() * 5)];
    data.ctx.fillText(data.codes[i], x, 25);
    x = x + 20;
  }

  drawLine();
};
export { draw };
